<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="所属学科" prop="subjectID">
        <el-select
          v-model="form.subjectID"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in list"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签名称" prop="tagName">
        <el-input style="width: 100%" v-model="form.tagName"></el-input>
      </el-form-item>
      <el-row type="flex" justify="end">
        <el-form-item>
          <el-button @click="$emit('cancel')">取消</el-button>
          <el-button type="primary" @click="hSubmit">确认</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { add, detail, update } from "@/api/hmmm/tags.js";
import { simple } from "@/api/hmmm/subjects.js";
export default {
  props: {
    curId: {
      type: Number,
      required: true,
    },
    isEdit: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      list: [],
      form: {
        subjectID: "",
        tagName: "",
      },
      rules: {
        subjectID: [
          { required: true, message: "请选择所属学科", trigger: "blur" },
        ],
        tagName: [
          { required: true, message: "请输入标签名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.loadlist();
    this.isEdit ? this.loaddetail() : ``;
  },
  methods: {
    // 清空表单
    // resetForm () {
    //   this.$refs.formRef.resetFields()
    // },
    // 添加标签
    async loadadd() {
      try {
        const res = await add(this.form);
        console.log("add", res);
        if (res.status !== 200) return this.$message.error("添加标签失败");
        this.$message.success("添加标签成功");
        this.$emit("hSuccess");
      } catch (err) {
        console.log("add", err);
      }
    },
    // 修改标签
    async loadupdate() {
      try {
        const res = await update(this.form);
        console.log("update", res);
        if (res.status !== 200) return this.$message.error("修改标签失败");
        this.$message.success("修改标签成功");
        this.$emit("hSuccess");
      } catch (err) {
        console.log("update", err);
      }
    },
    // 获取详细标签信息
    async loaddetail(id) {
      try {
        const res = await detail({ id: this.curId });
        console.log("detail", res);
        console.log(res.data, "111111111111111");
        this.form = { ...res.data };
      } catch (err) {
        console.log("detail", err);
      }
    },
    // 获取标签简单列表
    async loadlist() {
      try {
        const res = await simple(this.form);
        console.log("simple", res);
        this.list = { ...res.data };
      } catch (err) {
        console.log("simple", err);
      }
    },
    hSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.isEdit ? this.loadupdate() : this.loadadd();
      });
    },
  },
};
</script>

<style scoped lang='scss'>
</style>
